<template>
  <span>
    <span @click="onShow">
      <slot></slot>
    </span>
    <el-dialog
      v-if="visible"
      :title="$t('shortcutKey.HotKey')"
      append-to-body
      :visible.sync="visible"
      :class="['dialog', activeIndex === '1' && 'higherBox']"
    >
      <div class="box">
        <el-menu
          mode="horizontal"
          :default-active="activeIndex"
          :ellipsis="false"
          @select="onClick"
        >
          <el-menu-item index="0">{{$t('shortcutKey.UniversalShortcutKeys')}}</el-menu-item>
          <el-menu-item index="1">{{$t('shortcutKey.OnlineSessionShortcuts')}}</el-menu-item>
        </el-menu>
        <div class="flex">
          <span  v-if="activeIndex < 1" class="ctx-title">
            {{$t('shortcutKey.TaskSwitch')}}
            <el-tooltip
              effect="dark"
              placement="top"
              :content="$t('shortcutKey.SwitchTip')"
            >
              <i class="iconfont icon-wenzishuoming hover-color"></i>
            </el-tooltip>
          </span>
            <p v-if="activeIndex === '0'" class="key-switch">
              {{ shortcutOpen && shortcutOpen.commonSwitch ? $t('shortcutKey.ShortcutsOpen'): $t('shortcutKey.ShortcutToClose')}}
              <el-switch
                v-model="shortcutOpen.commonSwitch"
                active-color="#A1E036"
                @change="val => shortcutUpdateLocal({'commonSwitch' : val})"
              >
              </el-switch>
           </p>
            <p v-else class="key-switch">
              {{ shortcutOpen && shortcutOpen.imSwitch ? $t('shortcutKey.ShortcutsOpen'): $t('shortcutKey.ShortcutToClose')}}
              <el-switch
                v-model="shortcutOpen.imSwitch"
                active-color="#A1E036"
                @change="val => shortcutUpdateLocal({'imSwitch' : val})"
              >
              </el-switch>
           </p>
        </div>
        <div class="ctx-wrapper">
          <div class="ctx" v-if="activeIndex === '0'">
            <div v-for="(i, m) in keyInfo[0]" :key="m">
              <shortcut-key-item :list="i.list" :tip="i.tip" />
            </div>
          </div>
          <div class="ctx" v-else>
            <div v-for="(i, m) in keyInfo[1]" :key="m">
              <shortcut-key-item :list="i.list" :tip="i.tip" />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </span>
</template>
<script>
import ShortcutKeyItem from "./ShortcutKeyItem";
import { debounce } from 'lodash';
// import { ShortcutKeyMixins } from '@/mixins/ShortcutKey';
export default {
  name: "ShortcutKey",
  components: {
    ShortcutKeyItem,
  },
  // mixins: [ShortcutKeyMixins],
  data() {
    return {
      visible: false,
      activeIndex: '0',
      otherModalShow: false,
      preShortcut: {}, // 出现其他弹窗之前的状态
      keyInfo: [
        [
          {
            list: ["Alt", "↑"],
            tip: this.$t('shortcutKey.ListToUp'),
          },
          {
            list: ["Alt", "↓"],
            tip: this.$t('shortcutKey.ListToDown'),
          },
          {
            list: ["Alt", "←"],
            tip: this.$t('shortcutKey.TabToLeft'),
          },
          {
            list: ["Alt", "→"],
            tip: this.$t('shortcutKey.TabToRight'),
          },
        ],
        [
          {
            list: ["Enter"],
            tip: this.$t('shortcutKey.SendMsg'),
          },
          {
            list: ["Ctrl", "Enter"],
            tip: this.$t('shortcutKey.NewlineInput'),
          },
          {
            list: ["Alt", "Q"],
            tip: this.$t('shortcutKey.ExpandOrCollapse'),
          },
          {
            list: ["Ctrl", "Alt", "."],
            tip: this.$t('shortcutKey.CloseSession'),
          },
          {
            list: ["Alt", "1"],
            tip: this.$t('shortcutKey.ReplyOne'),
          },
          {
            list: ["Alt", "2"],
            tip: this.$t('shortcutKey.ReplyTwo'),
          },
          {
            list: ["Alt", "3"],
            tip: this.$t('shortcutKey.ReplyThree'),
          },
          {
            list: ["Alt", "4"],
            tip: this.$t('shortcutKey.ReplyFour'),
          },
          {
            list: ["Alt", "5"],
            tip: this.$t('shortcutKey.ReplyFive'),
          },
        ],
      ],
    };
  },
  watch: {
    otherModalShow () {
      if (this.otherModalShow) {
        this.preShortcut = {
          commonSwitch: this.shortcutOpen.commonSwitch,
          imSwitch: this.shortcutOpen.imSwitch
        }
        this.$store.dispatch('setShortcut', {
          commonSwitch: false,
          imSwitch: false
        })
      } else {
        Object.keys(this.preShortcut).length && this.$store.dispatch('setShortcut', this.preShortcut)
      }
    }
  },
  computed: {
    shortcutOpen: {
      get(){
        return this.$store.state.config.shortcutKey.openShortcutKey
      },
      set(v) { }
    }
  },
  methods: {
    shortcutUpdateLocal(val) {
      // this.$store.dispatch('updateLocal', val)
      this.$store.dispatch('setShortcut', {
        ...val,
        ...this.shortcutOpen
      }).then(() => this.$message.success('操作成功'))
    },
    onShow() {
      this.visible = true;
    },
    onHide() {
      this.visible = false;
    },
    onClick(active) {
      this.activeIndex = String(active)
    }
  },
  mounted () {
    // this.$store.dispatch('updateFromLocal')
    this.$store.dispatch('getShortcut')
  }
};
</script>
<style lang="stylus" scoped>
.hover-color
  background: #B3B9C7
  border-radius 50%
  color #fff
  font-size 12px
.box 
  height 380px
.flex
  display flex
  justify-content space-between
  align-items center
  margin-top 20px
  margin-bottom 20px
.menu
  display flex
  flex-direction column
  margin-top 14px
  margin-right 20px
  cursor pointer
  span 
    margin-bottom 20px
    padding 5px
    border-radius 4px
.noActive:hover
  background rgba(64,158,255, .2)
.active 
  background #409eff
.key-switch
  text-align right
  font-weight 600
  color #595959
  flex 1
.ctx-title
  font-weight 600
.higherBox
  >>>.el-dialog__body
    height 515px !important
.dialog
  >>>.el-dialog
    width 450px
    border-radius 6px
  >>>.el-dialog__header
    height 20px
  >>>.el-dialog__title
    font-weight 600
  >>>.el-dialog__body
    height 290px
  >>>.el-menu
    .el-menu-item
        font-weight 600
        font-size 14px
        color #000000
    .is-active
        color #459AE9
</style>
